<template>
  <view class="detail-view">
    <u-form label-width="140" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="分类名称">
          <u-input type="text" v-model="form.title" placeholder="分类名称" />
        </u-form-item>
        <u-form-item label="上级分类">
          <view class="float_right" @click="this.$refs.tkitree._show()">
            <text v-if="category_name">{{ category_name }}</text>
            <text class="input-pl" v-else>请选择上级分类</text>
          </view>
          <view slot="right">
            <u-icon name="arrow-down-fill" size="24"></u-icon>
          </view>
        </u-form-item>
        <u-form-item label="分类图片" label-position="top">
          <upload
            :images="form.images"
            @handleRemove="imgRemove"
            @uploadSuccess="uploadSuccess"
          />
        </u-form-item>
        <u-form-item label="一级分类广告图片" label-position="top">
          <upload
            :images="form.adImage"
            @handleRemove="uploadAdRemove"
            @uploadSuccess="uploadAdSuccess"
          />
        </u-form-item>
        <u-form-item label="分类排序" prop="name">
          <u-input
            type="text"
            v-model="form.sort"
            placeholder="请输入分类排序"
          />
        </u-form-item>
        <u-form-item label="是否显示">
          <view class="form-value">
            <u-switch
              style="transform: translateY(14rpx)"
              @change="switchChange"
              v-model="enableStatus"
              :active-value="5"
              :inactive-value="4"
              size="40"
            ></u-switch>
          </view>
        </u-form-item>
      </view>
    </u-form>
    <view class="detail-bottom">
      <u-button
        :loading="loading"
        class="handel-btn"
        type="primary"
        @click="addCategory"
        >提交</u-button
      >
    </view>
    <tki-tree
      ref="tkitree"
      :selectParent="true"
      :range="cate_list"
      rangeKey="title"
      @confirm="cateConfirm"
    >
    </tki-tree>
  </view>
</template>

<script>
import tkiTree from "@/components/tki-tree/tki-tree.vue";
import upload from "@/components/qiniu/QiniuUpload.vue";
export default {
  components: {
    tkiTree,
    upload,
  },
  data() {
    return {
      form: {
        code: "",
        images: "",
        sort: "",
        title: "",
        pid: "",
        enableStatus: 5,
        link: "",
        adImage: "",
      },
      cate_list: [],
      category_name: "", //分类名称
      enableStatus: true,
      id: "",
      loading: false,
    };
  },
  onLoad(options) {
    if (options.id) {
      (this.id = options.id),
        uni.setNavigationBarTitle({
          title: "编辑分类",
        });
      this.getCategoryInfoById();
    }
    this.getAllCategory();
  },
  methods: {
    //  获取所有商品分类
    getAllCategory() {
      this.$u.api
        .getAllCategory({
          enableStatus: 5,
        })
        .then((res) => {
          this.cate_list = res.data;
        });
    },
    cateConfirm(arr) {
      this.category_name = arr[0].title;
      this.form.pid = arr[0].id;
      this.form.link =
        arr[0].parents.map((item) => item.id).join(",") + "," + arr[0].id;
    },
    // 分类图片上传成功
    uploadSuccess(imgUrl) {
      if (this.form.images.length > 0) {
        this.$u.toast("图片只能添加一张");
        return;
      }
      this.form.images = [];
      this.form.images.push(imgUrl);
    },
    //移除分类图片
    imgRemove(arr) {
      this.form.images = "";
    },
    // 一级分类图片上传成功
    uploadAdSuccess(imgUrl) {
      if (this.form.adImage.length > 0) {
        this.$u.toast("图片只能添加一张");
        return;
      }
      this.form.adImage = [];
      this.form.adImage.push(imgUrl);
    },
    //移除一级分类图片
    uploadAdRemove(arr) {
      this.form.adImage = "";
    },
    switchChange(val) {
      this.form.enableStatus = val;
      console.log(this.form.enableStatus);
    },
    addCategory() {
      if (!this.form.title.trim()) {
        this.$u.toast("分类名称不能为空");
        return;
      }
      this.loading = true;
      try {
        if (this.id) {
          if (this.form.images) {
            this.form.images = this.form.images[0];
          }
          if (this.form.adImage) {
            this.form.adImage = this.form.adImage[0];
          }
          this.$u.api
            .editCategory(this.id, {
              ...this.form,
            })
            .then((res) => {
              this.$u.toast("编辑成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 500);
            });
        } else {
          this.$u.api
            .addCategory({
              ...this.form,
            })
            .then((res) => {
              this.$u.toast("新增成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 500);
            });
        }
        this.loading = false;
      } catch {
        this.loading = false;
      }
    },
    getCategoryInfoById() {
      this.$u.api.getCategoryInfoById(this.id).then((res) => {
        this.form = res.data;
        if (this.form.images) {
          let images = [];
          images.push(res.data.images);
          this.form.images = images;
        } else {
          this.form.images = [];
        }
        if (this.form.adImage) {
          let adImage = [];
          adImage.push(res.data.adImage);
          this.form.adImage = adImage;
        }
        if (this.form.enableStatus === 4) {
          this.enableStatus = false;
        }
        this.category_name = res.data.ptitle;
      });
    },
  },
};
</script>

<style lang="scss">
.handel-btn {
  border: 1px solid #fb5904 !important;
  background-color: #fb5904 !important;
}
</style>
